<meta title="" args="showcase" width="800"/>
<style>
    .PAGE_PARAMS_TIP {
        display: none;
    }
    .showcase-table th {
        width: 100px;
        text-align: right;
    }
    .showcase-table td {

    }
</style>
<div class="p">
    <form s="valid,form,nda,datac"
          s-data="showcase"
          id="form" class="form-inline">
        <table class="table table-condensed table-bordered table-striped showcase-table">
            <tr>
                <th>标题</th>
                <td>
                    <input autocomplete="off" type="text" name="title" s-valid-error="require()" class="form-control input-sm" placeholder="请输入标题">
                </td>
                <th>显示标题</th>
                <td>
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" name="showTitle" value="true">
                        <span class="s-checkbox-indicator"></span>
                    </label>
                </td>
                <th>标题居中</th>
                <td colspan="">
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" name="alignCenter" value="true">
                        <span class="s-checkbox-indicator"></span>
                    </label>
                </td>
            </tr>
            <tr>
                <th >图片</th>
                <td s-valid-role="item">
                    <div s="tpl"  id="icon" s-click="selectIcon()" style="display: inline-block">
                        <img src="{%=this.picUrl || 'images/upload-bg.jpg'%}" class="showcase-pic" style="max-width: 50px; max-height: 50px;" />
                        <input autocomplete="off" type="hidden" name="pic" value="{%=this.pic%}" />
                        <input autocomplete="off" type="hidden" name="picUrl" value="{%=this.picUrl%}" />
                    </div>
                    <a href="javascript:;" s-click="removeIcon()">删除</a>
                </td>
                <th>图片排版</th>
                <td class="form-inline">
                    <select class="form-control input-sm" name="picLayout">
                        <option value="COVER">覆盖</option>
                        <option value="LEFT">靠左</option>
                        <option value="RIGHT">靠右</option>
                        <option value="CENTER">居中</option>
                    </select>
                </td>
                <th>图片尺寸 <br />（长&times;宽）</th>
                <td class="form-inline">
                    <input autocomplete="off" type="number" name="picWidth" id="picWidth" style="width: 80px;" class="form-control input-sm" /> &times;
                    <input autocomplete="off" id="picHeight" type="number" name="picHeight" class="form-control input-sm"  style="width: 80px;" />
                </td>
            </tr>
            <tr>
                <th>标语</th>
                <td>
                    <input autocomplete="off" type="text" name="slogan" s-valid-error="require()" class="form-control input-sm" placeholder="请输入标语">
                </td>
                <th>宽度(百分比)</th>
                <td colspan="3">
                    <input autocomplete="off" type="text" name="width" s-valid-error="require(),number(),min(10,100)" class="form-control input-sm" placeholder="输入宽度">
                </td>

            </tr>
            <tr>
                <th>显示商品</th>
                <td colspan="5">
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" id="showItem" name="showItem" s-change="showItem(this)" value="true">
                        <span class="s-checkbox-indicator"></span>
                    </label>
                </td>
            </tr>
            <tbody id="itemSearchPanel" style="display: none">
            <tr>
                <th>显示价格</th>
                <td>
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" name="showPrice" value="true">
                        <span class="s-checkbox-indicator"></span>
                    </label>
                </td>
                <th>显示原售价</th>
                <td colspan="3">
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" name="showSalePrice" value="true">
                        <span class="s-checkbox-indicator"></span>
                    </label>
                </td>
            </tr>
            <tr>
                <th>商品显示数量</th>
                <td>
                    <input autocomplete="off" type="text" name="itemShowNum" s-valid-error="require(),number(),min(1)" value="1" class="form-control input-sm" placeholder="商品显示数量">
                </td>
                <th>商品读取数量</th>
                <td >
                    <input autocomplete="off" type="text" name="itemFetchNum" s-valid-error="require(),number(),min(1)" value="1" class="form-control input-sm" placeholder="商品读取数量">
                </td>
                <th>排列方式</th>
                <td>
                    <select class="form-control input-sm"
                            s-change="showTypeChange(this)"
                            id="showType"
                            name="showType">
                        <option value="LIST">列表</option>
                        <option value="SCROLL">滑动</option>
                        <option value="SLIDER">轮播</option>
                    </select>
                    <div style="display: none" class="p-t-xs" id="SLIDER_PARAM">
                        <input type="number" class="form-control input-sm" style="width: 90px;" placeholder="每行商品数" value="3" name="rowItemNum"/>
                        × <input type="number" value="1" style="width: 60px;" class="form-control input-sm" name="rowNum" placeholder="行数"/>
                    </div>
                </td>
            </tr>
            <tr>
                <th>商品查询参数</th>
                <td colspan="5">
                    <div id="pageItemSearchParams" s-window="{href: '/operation-center/COMMISSION_ITEM_SEARCH_PARAMS.html', args: {params: itemSearchParamsData}}" s="window"></div>
                </td>
            </tr>
            </tbody>
            <tr>
                <th>页面</th>
                <td colspan="5" class="form-inline">
                    <select class="form-control input-sm" s="select"
                            id="pageSelect"
                            s-build="S.get('/api/enum/valuesMap/core.operation.center.domain.Page')"
                            name="page">
                    </select>
                </td>
            </tr>
        </table>
    </form>
    <table class="table table-condensed table-bordered table-striped">
        <tr>
            <td >页面参数</td>
            <td>
                <div id="pageParams" s="window"></div>
            </td>
        </tr>
    </table>
</div>
<script>
    S.meta.title = showcase ? '编辑' : '新建'
    showcase = showcase || {}
    var paramData = parseQueryString(showcase.params)
    var itemSearchParamsData = parseQueryString(showcase.itemSearchParams)
    $pageSelect.node.change(function () {
        var val = $(this).val();
        $pageParams.load("/operation-center/params_" + val + ".html", {params: paramData})
    })

    function showItem($this) {
        if($this.node.prop("checked")) {
            $itemSearchPanel.node.fadeIn();
        } else {
            $itemSearchPanel.node.fadeOut();
        }
    }

    function selectIcon() {
        S.popupOpen("/oss/objects-selector.html", {prefix: 'operation'}).done(function(datas) {
            if(datas) {
                var icon = datas[0];
                $icon.data({
                    pic: icon.key,
                    picUrl: icon.url,
                })
                setTimeout(function() {
                    var img = S.node.find(".showcase-pic")[0]
                    $picWidth.node.val(img.naturalWidth)
                    $picHeight.node.val(img.naturalHeight)
                }, 300)
            }
        })
    }

    function removeIcon() {
        $icon.data({
            qrcode: "",
            picUrl: "",
        })
    }
    S.meta.btns = [
        {
            name: "确定",
            style: "btn btn-primary",
            click: function() {
                $form.validate().done(function() {
                    $pageParams.getParams().done(function(params) {
                        $pageItemSearchParams.getParams().done(function(itemSearchParams) {
                            var obj = Smart.serializeToObject($form.node);
                            obj.pageTitle = getPageTitle();
                            obj.params = params;
                            obj.itemSearchParams = seriObj(itemSearchParams)
                            S.close(obj)
                        })

                    })
                })
            }
        },
        {
            name: "关闭",
            style: "btn btn-default",
            click: function() {
                S.close();
            }
        }
    ]

    function seriObj(obj) {
        var list = []
        for(var key in obj) {
            list.push(key + "=" + encodeURIComponent(obj[key]))
        }
        return list.join('&')
    }

    function parseQueryString(params) {
        var paramData = {}
        $.each((params || "").split("&"), function() {
            var tmps = this.split("=")
            if(tmps.length == 1) {
                paramData[tmps[0]] = ''
            } else {
                paramData[tmps[0]] = decodeURIComponent(tmps[1]);
            }
        })
        return paramData;
    }

    function showTypeChange($this) {
        $SLIDER_PARAM.node[$this.node.val() == 'SLIDER' ? 'fadeIn' : 'fadeOut']()
    }

    S.on("s-ready", function () {
        $pageSelect.node.change();
        $showItem.node.change();
        $showType.node.change()
    })
    function getPageTitle() {
        return $pageSelect.node.find("option[value='" + $pageSelect.node.val() + "']").text();
    }

</script>